<template>
  <div>
    <!-- 头像与资料区域 -->
    <div class="profile-box">
      <!-- 头像 -->
      <!-- 如果我们使用postcss-pxtorem插件做px转rem时，它只能帮你转你写的style里的单位 -->
      <!-- 行内属性写的px无法转 -->
      <van-image round fit="cover" :src="info.photo" />
      <!-- 资料的div -->
      <div class="info-box">
        <div class="name">{{ info.name }}</div>
        <div class="birth">{{ info.birthday }}</div>
      </div>
    </div>

    <!-- 中间摆设区域 -->
    <van-row>
      <van-col span="8">
        <van-icon class="one" name="newspaper-o" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon class="two" name="star-o" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon class="three" name="tosend" />
        <span>阅读历史</span>
      </van-col>
    </van-row>

    <!-- 下面cell区域 -->
    <van-cell-group>
      <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link />
      <van-cell to="/mine/chat" title="小智同学" icon="chat-o" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell @click="logout" title="退出登录" icon="info-o" is-link />
    </van-cell-group>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({ info: 'userInfo' })
  },
  created() {
    // 调用vuex里的actions
    this.$store.dispatch('reqUserInfo')
  },
  methods: {
    logout () {
      // 删除token
      this.$store.commit('logout')
      // 退出成功
      this.$toast.success('退出成功')
      // 跳转到登录页
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
*{

  font-size: 16px;
}
// 资料区域的div
.profile-box {
  height: 140px;
  background-color: #3296fa;
  // 开启弹性布局：是为了让图片和资料能在一行
  display: flex;
  // 副轴居中，现在y轴为副轴，就是垂直居中
  align-items: center;

  // vant里的组件有个特点
  // 它的标签名叫什么，就一定有一个类就叫这个
  // 例如标签名叫van-image，那么它身上必然有一个也叫van-image
  .van-image {
    width: 85px;
    height: 85px;
    margin-left: 20px;
    margin-right: 10px;
  }

  .info-box {
    color: #fff;

    .name {
      font-weight: bold;
    }

    .birth {
      background-color: #fff;
      color: #3296fa;
      text-align: center;
      margin-top: 10px;
    }
  }
}

// 摆设区域
.van-row {
  .van-col {
    height: 80px;
    display: flex;
    // 修改主轴为y轴
    flex-direction: column;
    // 主副轴居中
    justify-content: center;
    align-items: center;

    .van-icon {
      font-size: 36px;
      margin-bottom: 5px;

      &.one {
        color: #8daaff;
      }

      &.two {
        color: red;
      }

      &.three {
        color: orange;
      }
    }
  }
}
</style>
